<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${applicationScope.ojName}</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.flat.min.css"/>
    <style>
        .main {
            width: 60%;
            margin: 0 auto;
        }

        .title {
            font-size: 2em;
            background: #FFF;
            border-bottom: solid 1px #CCCCCC;
            padding: 10px;
            margin-bottom: 30px;
        }

        .title a {
            font-size: 20px;
        }

        .list .item {
            margin: 20px 0;
            padding: 10px;
            display: table;
            outline: 1px solid #ccc;
            box-sizing: border-box;
            width: 100%;
            box-shadow: 2px 2px 2px #ccc;
        }

        .list .title {
            font-size: inherit;
            border: none;
            padding: 0;
        }

        .list .content {
            font-size: 14px;
            color: #777;
        }

        .list .item .right {
            margin: 0;
            box-sizing: border-box;
            padding: 0;
            top: 0;
            height: 100%;
            vertical-align: middle;
            line-height: 30px;
        }

        .list .item .left {
            box-sizing: border-box;
            margin: 0;
            line-height: 30px;
        }
    </style>
</head>

<body>

<jsp:include page="/heard.html" flush="true"/>

<div class="title">
    <div class="main">
        比赛&amp;作业
    </div>
</div>

<div class="main">
    <ul class="am-nav am-nav-pills">
        <li ${param.type == null || param.type eq 'ing' ? " class='am-active'":""}>
            <a href="${pageContext.request.contextPath}/contest.html?type=ing">正在进行</a>
        </li>
        <li ${param.type != null && param.type eq 'end' ? " class='am-active'":""}>
            <a href="${pageContext.request.contextPath}/contest.html?type=end">已经结束</a>
        </li>
    </ul>

    <div class="list">
        <c:forEach items="${requestScope.list_ing}" var="contest">
            <div class="item">
                <div class="am-align-left left">
                    <a href="${pageContext.request.contextPath}/contest/problemset.html?cid=${contest.contest_id}"
                       class="title">${contest.title}</a>
                    <br/>
                    <span class="content">${contest.content}</span>
                </div>
                <div class="am-align-right right">
                    <span class="am-icon-calendar am-text-success start" style="color: #136413">&nbsp;开始时间：${contest.start_time}</span>
                    <br/>
                    <span class="am-icon-calendar am-text-danger end" style="color: #7a1717">&nbsp;结束时间：${contest.end_time}</span>
                </div>
            </div>
        </c:forEach>
        <c:if test="${param.type == null || param.type eq 'ing'}">
            <div class="hr">
                <h4>即将到来</h4>
                <hr/>
            </div>
            <c:forEach items="${requestScope.list}" var="contest">
                <div class="item">
                    <div class="am-align-left left">
                        <a href="${pageContext.request.contextPath}/contest/problemset.html?cid=${contest.contest_id}"
                           class="title">${contest.title}</a>
                        <br/>
                        <span class="content">${contest.content}</span>
                    </div>
                    <div class="am-align-right right">
                        <span class="am-icon-calendar am-text-success start" style="color: #136413">&nbsp;开始时间：${contest.start_time}</span>
                        <br/>
                        <span class="am-icon-calendar am-text-danger end" style="color: #7a1717">&nbsp;结束时间：${contest.end_time}</span>
                    </div>
                </div>
            </c:forEach>
        </c:if>
    </div>

</div>

<jsp:include page="/foot.html" flush="true"/>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script>
    $(function () {
        $('.contest').addClass('am-active');
    })
</script>
</body>

</html>
<!--http://contests.acmicpc.info/contests.json-->
<!--数据来源：http://contests.acmicpc.info/contests.json-->